Adding a datetime, date, month, week, time and datetime-local Field to a Form

The previous version of HTML do not include date picker control. However, with the advent of HTML 5, you can easily select a date and time from a date picker control by using various input type values of date, such as date, month, week, time, datetime, and datetime-local.

Let’s do the following steps to add a date picker control:


<!DOTYPE html>
<head>
    <title>Adding a Date Picker Control</title>
</head>
<body>
<center>
    <h2>Example to select Date and Time</h2>
    <font color=”darkblue” size=”4px”>
    <b> Different date picker controls are added. Select month, week, date and time. </b><br><br>
    <form>
        <table border=”1” cellpadding=”10” cellspacing=”10” >
            <tr>
            <td align=”left”>
            Date and Time : <input type=”datetime” name=”dt” />
            <br><br>
            Date: <input type=”date” name=”dte” /><br><br>
            Time: <input type=”time” name=”tm” /><br><br>
            Week: <input type=”week” name=”wk” /><br><br>
            Month: <input type=”month” name=”mn” /><br><br>
            Local Date & time: <input type=”datetime-local” name=”dtlocal” />
            </td></tr>
        </table>
        </font>
    </form>
</center>
</body>
</html>

Save the document with the name AddingDate.html and open on browser.

Note: In HTML 5, the datetime input type attribute is not supported in Internet Explorer you should open other browser, such as: chrome, opera, mozilla etc.